<template>
  <view>
    <el-row>
      <el-form
        ref="form"
        v-if="formData && field"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-col :span="8" v-for="(meta, _index) in field" :key="_index">
          <el-form-item
            :label="meta.memo"
            :required="meta.tagNeed"
            :prop="meta.name"
          >
            <template v-if="meta.component">
              <component
                :is="meta.component"
                v-model:form-data="formData[meta.name]"
              />
            </template>
            <template v-else-if="meta.dictList">
              <com-select
                v-model="formData[meta.name]"
                :dictList="meta.dictList"
                :memo="meta.memo"
              />
            </template>
            <template v-else-if="meta.type === 3">
              <el-date-picker
                v-model="formData[meta.name]"
                type="datetime"
                :placeholder="`请输入${meta.memo}`"
                value-format="x"
                style="width: 100%"
              />
            </template>
            <template v-else-if="meta.type === 140">
              <com-tags-select v-model:checks="formData[meta.name]" />
            </template>
            <template v-else-if="meta.type === 150">
              <com-param-select v-model:defaultIds="formData[meta.name]" />
            </template>
            <template v-else-if="meta.type === 2">
              <el-input-number
                v-model.number="formData[meta.name]"
                :placeholder="`请输入${meta.memo}`"
              />
            </template>
            <template v-else-if="meta.type === 210">
              <el-input-number
                v-model.number="formData[meta.name]"
                :precision="2"
                :placeholder="`请输入${meta.memo}`"
              />
            </template>
            <template v-else-if="[110, 111, 160, 161].includes(meta.type)">
              <n-upload
                v-model:fileKey="formData[meta.name]"
                :limit="[110, 160].includes(meta.type) ? 1 : 9"
              >
              </n-upload>
            </template>
            <template v-else>
              <el-input
                v-model="formData[meta.name]"
                :placeholder="`请输入${meta.memo}`"
              />
            </template>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <view class="uni-button-group">
        <button
          style="width: 100px"
          type="primary"
          class="uni-button"
          @click="submit"
        >
          {{ $t("common.button.submit") }}
        </button>
        <navigator open-type="navigateBack" style="margin-left: 15px"
          ><button style="width: 100px" class="uni-button">
            {{ $t("common.button.back") }}
          </button></navigator
        >
      </view>
    </el-row>
  </view>
</template>

<script>
import ComTagsSelect from "@/components/com-tags-select/com-tags-select.vue";
import ComParamSelect from "@/components/com-param-select/com-param-select.vue";

export default {
  components: { ComTagsSelect, ComParamSelect },
  props: {
    metadata: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    field() {
      return [
        ...this.metadata.filter((item) => !item.hidden),
        ...this.extendMeta,
      ];
    },
    rules() {
      let rules = {};
      this.field.forEach((item) => {
        rules[item.name] = [];
      });
      return rules;
    },
  },
};
</script>

<style></style>
